@auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 4.14) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .header_ {
    position: relative !important;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    background: #fff;
  }

  .level {
    width: 100vw;
    overflow: hidden;
  }

  .level_type_1 {
    background: linear-gradient(90deg, #1b0836 0%, #4e056a 100%);
  }

  .level_type_2 {
    background: linear-gradient(90deg, #331f08 0%, #360a39 100%);
  }

  .back_type_1 {
    background: url(@/assets/images/activity/wealth_bg@2x.png) no-repeat;
  }

  .back_type_2 {
    background: url(@/assets/images/activity/charm_bg@2x.png) no-repeat;
  }

  .header_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .pxToVW(414);
    .pxToVW(296, height);

    background-size: cover;
    position: relative;

    .center_list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      // position: absolute;
      // bottom: 0;
      color: #ffffff;
      // .pxToVW(24, margin-top);

      .wealth {
        .pxToVW(262);
        display: flex;
        flex-direction: column;

        .userIfon {
          display: flex;
          flex-direction: column;
          .pxToVW(18, margin-left);

          .head_pic {
            display: flex;

            >img {
              .pxToVW(60);
              .pxToVW(60, height);
              border-radius: 50%;
              .pxToVW(15, margin-right);
            }

            .dengji_and_name {
              .pxToVW(60, height);
              display: flex;
              flex: 1;
              flex-direction: column;
              justify-content: space-around;

              span {
                .pxToVW(14, font-size);
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.7);
              }
            }
          }
        }

        .progressBar {
          .pxToVW(222);
          .pxToVW(10, height);
          .pxToVW(7, border-radius);
          .pxToVW(20, margin-top);
          .pxToVW(18, margin-left);
          background: rgba(255, 255, 255, 0.49);
          position: relative;
          overflow: hidden;

          .progress {
            overflow: visible;
          }

          .progress-bar {
            float: left;
            width: 0;
            height: 100%;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background-color: #337ab7;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: width 0.6s ease;
            -o-transition: width 0.6s ease;
            transition: width 0.6s ease;
          }

          .progress .progress-bar {
            border-radius: 20px;
            position: relative;
            animation: animate-positive 2s;
          }

          .progress-bar-info {
            background-color: #ffffff;
            border-radius: 0 20px 20px 0;
          }

          @-webkit-keyframes animate-positive {
            0% {
              width: 0;
            }
          }

          @keyframes animate-positive {
            0% {
              width: 0;
            }
          }
        }

        .disparity {
          .pxToVW(18, margin-left);
          .pxToVW(13, font-size);
          .pxToVW(11, margin-top);
          .pxToVW(10, margin-bottom);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);

          >span:nth-of-type(2) {
            .pxToVW(14, font-size);
          }
        }
      }

      .icon_dengji {
        display: flex;
        width: 41vw;
        height: 41vw;
        justify-content: center;
        align-items: center;
        position: relative;

        // >img {
        //   width: 38vw;
        //   position: absolute;
        //   top: 0vw;
        //   right: 1vw;
        //   height: 30vw;
        // }
      }

      .Strategy {
        .pxToVW(97);
        .pxToVW(34, height);
        .pxToVW(18, margin-left);
        .pxToVW(13, margin-bottom);

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .Wealthlevel_dengji {
    .pxToVW(382);
    .pxToVW(216, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;

    .center_neirong {
      width: 92%;
      height: 100%;
      margin: @auto;
      display: flex;
      justify-content: space-between;

      .left_icon {
        .pxToVW(34);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        img:nth-of-type(1) {
          width: 100%;
          .pxToVW(52, margin-top);
        }

        img:nth-of-type(2) {
          width: 100%;
          .pxToVW(55, margin-top);
        }
      }

      .right_center {
        display: flex;
        .pxToVW(300);
        height: 100%;
        flex-direction: column;
        justify-content: center;

        .title_top {
          .pxToVW(14, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ee64f1;

          .title_top_2 {
            color: #fec382;
          }
        }

        .text_icon {
          .pxToVW(13, font-size);
          .pxToVW(9, margin-top);
          .pxToVW(20, margin-bottom);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          overflow: hidden;

          img {
            .pxToVW(19);
          }

          .text_icon_img2 {
            filter: drop-shadow(0 -40px #fec382);
            position: relative;
            top: 40px;
          }

          span:nth-of-type(2) {
            .pxToVW(11, font-size);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(238, 100, 241, 0.74);
          }

          #text_icon_2 {
            color: rgba(254, 195, 130, 0.74);
          }
        }

        .secondary_title {
          .pxToVW(14, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ee64f1;

          .secondary_title_typr_2 {
            color: #fec382;
          }
        }

        .secondary_center {
          .pxToVW(9, margin-top);
          // .pxToVW(9, margin-bottom);
          .pxToVW(13, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .upgrade_up {
          overflow: hidden;

          img {
            .pxToVW(19);
          }

          span {
            .pxToVW(11, font-size);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(238, 100, 241, 0.74);
          }
        }

        .upgrade_up2 {
          img {
            filter: drop-shadow(0 -40px #fec382);
            position: relative;
            top: 40px;
          }

          span {
            color: rgba(254, 195, 130, 0.74);
          }
        }
      }
    }
  }

  .GradeTable {
    .pxToVW(382);
    // .pxToVW(466, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    .pxToVW(20, margin-top);
    .pxToVW(20, margin-bottom);

    .level_rich {
      .pxToVW(362);
      // .pxToVW(436, height);
      margin: @auto;
      overflow: hidden;

      .title {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        .pxToVW(13, margin-top);

        >div {
          .pxToVW(120);
          .pxToVW(44, height);
          display: flex;
          justify-content: center;
          align-items: center;
          .pxToVW(15, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
      }

      .center_body:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        .pxToVW(17, margin-bottom);
      }

      .center_body {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);

        >div {
          .pxToVW(120);
          .pxToVW(44, height);
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 1px solid rgba(255, 255, 255, 0.2);

          >img {
            width: 80%;
          }
        }

        >div:nth-of-type(2) {
          .pxToVW(13, font-size);
          font-family: Helvetica;
          color: #ffffff;
        }

        >div:nth-of-type(3) {
          .pxToVW(15, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .Exhibition {
    .pxToVW(382);
    // .pxToVW(892, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    .pxToVW(20, margin-bottom);
    overflow: hidden;
    .pxToVW(18, padding-bottom);

    .list_bition {
      width: 92%;
      height: 100%;
      margin: @auto;

      >img {
        .pxToVW(20, margin-top);
        width: 100%;
      }

      .title_top_mistion {
        .pxToVW(16, font-size);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #EE64F1;
        .pxToVW(10, margin-top);
      }

      .two_mistion {
        .pxToVW(12, margin-top);
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }

      .two_mistion2 {
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        .pxToVW(20, margin-top);

      }

      .span_center_istion {
        .pxToVW(10, margin-top);
        display: flex;
        flex-direction: column;
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .EntryEffect {
    .pxToVW(382);
    border-radius: 18px 18px 0 0;
    // .pxToVW(466, height);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    display: flex;
    flex-direction: column;

    .title_top_cont {
      width: 100%;
      .pxToVW(51, height);
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .pxToVW(14, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .center_body2:nth-child(odd) {
      background: rgba(255, 255, 255, 0.22);
    }

    .center_body2:last-child {
      margin-bottom: 40px;
    }

    .center_body2:nth-child(odd) {
      background: rgba(255, 255, 255, 0.22);
    }

    .center_body2 {
      .pxToVW(362);
      .pxToVW(92, height);
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      margin: @auto;

      .icon_dengji2 {
        .pxToVW(100);
        display: flex;
        align-items: center;

        img {
          .pxToVW(30, height);
        }
      }

      .icon_texiao2 {
        .pxToVW(217);
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 10;

        .room_go {
          display: flex;
          align-items: center;
          z-index: 999;
          .pxToVW(217);
          .pxToVW(48, height);
          display: flex;
          align-items: center;

          >img {
            .pxToVW(24);
            .pxToVW(6, margin-top);
            .pxToVW(30, margin-left);
            .pxToVW(6, margin-right);
          }

          span:nth-of-type(1) {
            .pxToVW(8, font-size);
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffe301;
            .pxToVW(5, padding-right);
            .pxToVW(8, padding-top);
          }

          span:nth-of-type(2) {
            .pxToVW(8, font-size);
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #fff;
            .pxToVW(8, padding-top);
          }
        }

        >img {
          position: absolute;
          .pxToVW(217);
          .pxToVW(48, height);
        }
      }

      .post_name {
        position: absolute;
        top: 0;
        right: 0;
        .pxToVW(12, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        padding: 4px 8px;
        border-radius: 0 0 0 10px;
        z-index: 20;
      }
    }
  }

  .table_tab {
    display: flex;
    justify-content: center;
    align-items: center;

    >div {
      .pxToVW(16, font-size);
      .pxToVW(22, line-height);
      padding: 0 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      position: relative;
      display: flex;
      justify-content: center;

      >.line {
        .pxToVW(25);
        .pxToVW(3, height);
        .pxToVW(4, border-radius);
        .pxToVW(-12, bottom);
        background: #ffffff;
        position: absolute;
      }
    }

    .active2 {
      .pxToVW(18, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }